<template>
	<view class="savepadding">
		<view class="item" style="padding: 30rpx 20rpx;margin-top: 20rpx;">
			
			<view style="display: flex;align-items: center;justify-content: space-between;">
				<text style="font-size: 28rpx;color: #333;">车辆状态:</text>
				<text style="font-size: 28rpx;color: #333;">{{carstate}}</text>
			</view>
			
		</view>


		<u-form :model="vehicle" ref="uform" label-width="auto">

			<view class="">
				<u-icon name="order" color="#1573FF" label="行驶证信息" label-color="#333333"></u-icon>
			</view>
			<u-form-item>
				<view class="uploadBg">
					<lr-upload tag="1" width="320rpx" height="200rpx" uploadType="2" :addBtnImage="driveDefault"
						 @on-change="uploadOnChange"></lr-upload>
				</view>
			</u-form-item>

			<u-form-item label="发证日期" @click="pickerShow(1)" borderBottom>
				<u-input v-model="vehicle.licenseDate" inputAlign="right" placeholder="上传行驶证自动获取"
					disabled disabledColor="#ffffff" border="none"
					type="select" :select-open="actionSheetShow"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<u-form-item label="车牌号" borderBottom>
				<u-input v-model="vehicle.carNo" inputAlign="right" border="none" placeholder="上传行驶证自动获取"></u-input>
			</u-form-item>

			<u-form-item label="车架号" :required="true" borderBottom>
				<u-input v-model="vehicle.vinNo" inputAlign="right" border="none" placeholder="上传行驶证自动获取"></u-input>
			</u-form-item>

			<u-form-item label="发动机号" borderBottom>
				<u-input v-model="vehicle.engineNo" inputAlign="right" border="none" placeholder="上传行驶证自动获取"></u-input>
			</u-form-item>

			<u-form-item label="车辆类型" borderBottom>
				<u-input v-model="vehicle.carType" inputAlign="right" border="none" placeholder="上传行驶证自动获取"></u-input>
			</u-form-item>

			<u-form-item label="所有人" borderBottom>
				<u-input v-model="vehicle.carOwner" inputAlign="right" border="none" placeholder="上传行驶证自动获取"></u-input>
			</u-form-item>

			<u-form-item label="住址" borderBottom>
				<u-input v-model="vehicle.carOwnerDddr" inputAlign="right" border="none" placeholder="上传行驶证自动获取"></u-input>
			</u-form-item>

			<view style="margin:30rpx 0;">
				<u-icon name="order" color="#1573FF" label="基础信息" label-color="#333333"></u-icon>
			</view>

			<u-form-item label="品牌车型" :required="true" @click="pickerShow(2)" borderBottom>
				<u-input v-model="vehicle.carInfo" inputAlign="right" placeholder="请选择"
					disabled disabledColor="#ffffff" border="none"
					type="select"></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<u-form-item label="车辆颜色" @click="pickerShow(3)" borderBottom>
				<u-input v-model="vehicle.carColor" inputAlign="right" placeholder="请选择"
					disabled disabledColor="#ffffff" border="none"
					type="select"></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<u-form-item label="车辆初始里程数" borderBottom>
				<u-input v-model="vehicle.meligile" inputAlign="right" border="none" placeholder="请输入"></u-input>
			</u-form-item>

			<u-form-item label="车辆当前里程数" borderBottom>
				<u-input v-model="vehicle.sumOdograph" inputAlign="right" border="none" placeholder="请输入"></u-input>
			</u-form-item>

			<u-form-item label="GPS设备号" borderBottom>
				<u-input v-model="vehicle.gpsDeviceNo" inputAlign="right" border="none" placeholder="请输入"></u-input>
			</u-form-item>

			<u-form-item label="车辆使用性质" borderBottom>
				<u-input v-model="vehicle.useType" inputAlign="right" border="none" placeholder="请输入"></u-input>
			</u-form-item>

			<u-form-item label="有无侧门" @click="pickerShow(4)" borderBottom>
				<u-input v-model="vehicle.sideDoorStr" inputAlign="right" placeholder="请选择"
					disabled disabledColor="#ffffff" border="none"
					type="select"></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<u-form-item label="车辆归属" @click="clickCarDept()" :required="true" borderBottom>
				<u-input v-model="vehicle.deptName" inputAlign="right" placeholder="请选择" type="select"
					disabled disabledColor="#ffffff" border="none"></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<u-form-item label="所属仓库" :required="true" @click="pickerShow(5)" borderBottom>
				<u-input v-model="vehicle.depotName" inputAlign="right" placeholder="请选择"
					disabled disabledColor="#ffffff" border="none"
					type="select"></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<u-form-item label="下次保养里程/km" borderBottom>
				<u-input v-model="vehicle.nextMaintenance" border="none" inputAlign="right" placeholder="请输入"></u-input>
			</u-form-item>

			<u-form-item label="下次保养时间" @click="pickerShow(6)" borderBottom>
				<u-input v-model="vehicle.nextMaintenanceDate" inputAlign="right" placeholder="请选择"
					disabled disabledColor="#ffffff" border="none"
					type="select"></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<u-form-item label="选择供应商" @click='clickSupplierName' borderBottom>
				<u-input v-model="vehicle.purchaseSupplierName" inputAlign="right" placeholder="请选择"
					disabled disabledColor="#ffffff" border="none"
					type="select"></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>

			<u-form-item label="车辆备注" borderBottom>
				<u-input v-model="vehicle.remark" inputAlign="right" border="none" placeholder="请输入" type="textarea"></u-input>
			</u-form-item>
			
			<u-form-item label="是否纠纷车" label-width="240" borderBottom>
				
				<u-radio-group
				v-model="spareCarSel"
					@change="radioGroupChange">
					<u-radio
					 :customStyle="{'margin-right': '15rpx'}"
					 shape="circle" label="是" name="是">
					</u-radio>
					
					<u-radio
					 :customStyle="{'margin-right': '15rpx'}"
					 shape="circle" label="否" name="否">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			
			<u-form-item label="纠纷原因" borderBottom v-if="showDispute">
				<u-input v-model="aaa" inputAlign="right" border="none" placeholder="请输入" type="textarea"></u-input>
			</u-form-item>
			
			<u-form-item label="车辆状态" label-width="180" borderBottom>
				
				<u-radio-group
				v-model="stateSel"
					@change="radioGroupChange">
					<u-radio
					 :customStyle="{'margin-right': '15rpx'}"
					 shape="circle" label="整备中" name="整备中">
					</u-radio>
					
					<u-radio
					 :customStyle="{'margin-right': '15rpx'}"
					 shape="circle" label="备发车" name="备发车">
					</u-radio>
				</u-radio-group>
			</u-form-item>

			<u-form-item label="随车物品" prop="">
				
			</u-form-item>
			
			<uni-data-checkbox multiple v-model="value" :localdata="checkboxList" @change="checkboxGroupChange"
			:map="{
				'value':'code',
				'text':'value'
			}"
			></uni-data-checkbox>
			
			<!-- <u-checkbox-group @change="checkboxGroupChange" placement="row">
				<u-checkbox v-for="(item, index) in checkboxList" v-model="item.checked" :key="index"
				:label="item.value"
					:name="item.value">{{ item.value }}
				</u-checkbox>
			</u-checkbox-group> -->

			<u-form-item>
				<view class="car-photo" style="padding: 20rpx 0; display: block;font-size: 30rpx;color: #333;">车辆图片</view>
				<lr-upload ref="upload1" objType="6" tag="2" @on-change="uploadOnChange"></lr-upload>
			</u-form-item>


		</u-form>
		
		<view style="height: 100rpx;"></view>

		<view class="button-container">
			
			<button class="btn-item" @click="bottomClick(2)">提交</button>
		</view>


		<!-- 弹框 -->
		<!-- 发证时间 -->
		<!-- <u-picker :mode="mode" v-model="licenseTimeShow" @confirm="pickerConfim()"></u-picker> -->
		<u-datetime-picker
			:show="licenseTimeShow"
			mode="date" @confirm="timeConfirm"
			@cancel="licenseTimeShow=false"></u-datetime-picker>
		
		<!-- 品牌车型 -->
		<u-picker :mode="mode" :show="carInfoShow" :default-selector="[0]" :columns="carInfoList"
			keyName="brandSeriesModel" @confirm="pickerConfim" @cancel="carInfoShow=false"></u-picker>

		<!-- 车辆颜色 -->
		<u-picker :mode="mode" :show="carColorShow" :default-selector="[0]" :columns="carColorList" keyName="value"
			@confirm="pickerConfim" @cancel="carColorShow=false"></u-picker>

		<!-- 有无侧门 -->
		<u-picker :mode="mode" :show="carSideShow" :default-selector="[0]" :columns="sideList" keyName="value"
			@confirm="pickerConfim" @cancel="carSideShow=false"></u-picker>

		<!-- 车辆仓库 -->
		<u-picker :mode="mode" :show="carWarehouseShow" :default-selector="[0]" :columns="carWarehouseList"
			keyName="warehouseName" @confirm="pickerConfim" @cancel="carWarehouseShow=false"></u-picker>

		<!-- 保养时间 -->
		<u-datetime-picker
			:show="maintenanceDateShow"
			mode="date" @confirm="timeConfirm"
			@cancel="maintenanceDateShow=false"></u-datetime-picker>
		
<!-- 		<u-picker :mode="mode" v-model="maintenanceDateShow" @confirm="pickerConfim()"></u-picker> -->
        <!-- 车辆归属 -->
		<gljyDataPicker class="deptPicker"  ref="picker" :idkey="'deptId'" :isSuper="true" namekey="deptName" :childrenkey="'subDeptList'"
			:title="'请选择'" :initList="deptList" @itemOnclick="itemOnclickDept">
		</gljyDataPicker>
		
	</view>
</template>

<script>
	import lrUpload from '@/components/global/lr-upload.vue'
	import gljyDataPicker from "@/components/gljy-data-picker/gljy-data-picker.vue";
  import {isVideo} from "@/common/calc";
	export default {
		components: {
			lrUpload,
			gljyDataPicker
		},
		data() {
			return {
				type: 0,
				carstate:'',
				carId:'',
				spareCarSel:'',
				stateSel:'',
				mode: 'time',
				//顶部信息
				numList: [{
						name: '添加基础信息'
					},
					{
						name: '添加维保信息'
					},
				],
				driveDefault:'',

				//发证时间是否显示
				licenseTimeShow: false,
				//车牌号键盘是否显示
				carNoShow: false,
				//随车物品
				checkboxList: [],
				//品牌车型
				carInfoShow: false,
				showDispute: false,//是否展示纠纷原因
				carInfoList: [],
				//车辆颜色
				carColorShow: false,
				carColorList: [],
				//有无侧门
				carSideShow: false,
				sideList: [[{
						value: '有',
						code: 1
					},
					{
						value: '无',
						code: 2
					}
				]],
				value:[],
				//车辆仓库
				carWarehouseShow: false,
				carWarehouseList: [],
				//保养时间
				maintenanceDateShow: false,
				//车辆归属
				deptList: [],
				//车辆信息
				vehicle: {
					//行驶证信息
					imgDrivinglicenseFront: String,
					licenseDate: String,
					carNo: String,
					vinNo: '',
					engineNo: String,
					carType: String,
					carOwner: String,
					carOwnerDddr: String,

					//车辆基础信息
					brandId: String,
					brandName: String,
					seriesId: String,
					seriesName: String,
					modelId: String,
					modelName: String,
					carInfo: '',
					carColor: String,
					meligile: String,
          sumOdograph: String,
					gpsDeviceNo: String,
					useType: String,
					sideDoor: String,
					sideDoorStr: String,
					deptId: '',
					deptName: String,
					depotId: '',
					depotName: String,
					nextMaintenance: String,
					nextMaintenanceDate: String,
					purchaseSupplierId: '',
					purchaseSupplierName: '',
					accessoryItems: String,
					remark: String,
					accessoryItemsName: String,
					carUrl: []
				},

			}
		},

		onLoad(op) {
			
			this.carstate = op.carstate;
			this.carId = op.id;
			
			this.checkboxList = this.$store.state.params.getCarCommon.accessoryItem;
			this.carInfoList = [this.$store.state.params.brandseriesmodel];
			this.carColorList = [this.$store.state.params.getCarCommon.color];
			this.carWarehouseList = [this.$store.state.params.warehouseList];
			this.getDeptList();
			
			this.getOldData();
			
			console.log('this.checkboxList', this.checkboxList);
			
			uni.$on('supplersel', res=>{
				this.vehicle.purchaseSupplierId = res.purchaseSupplierId;
				this.vehicle.purchaseSupplierName = res.supplierName;
			})
			
		},
		onShow(options) {
			if(!uni.$u.test.isEmpty(options)){
				// this.vehicle.purchaseSupplierId = options.channelId?options.channelId:'';
				// this.vehicle.purchaseSupplierName = options.channelName?options.channelName:'';
			}
			
		},

		methods: {
			//picker是否显示
			pickerShow(type) {
				switch (type) {
					case 1:
						this.licenseTimeShow = true;
						this.mode = 'time';
						break
					case 2:
						this.carInfoShow = true;
						this.mode = 'selector';
						break
					case 3:
						this.carColorShow = true;
						this.mode = 'selector';
						break
					case 4:
						this.carSideShow = true;
						this.mode = 'selector';
						break
					case 5:
						this.carWarehouseShow = true;
						this.mode = 'selector';
						break
					case 6:
						this.maintenanceDateShow = true;
						this.mode = 'time';
						break
				}
				this.type = type;
			},
			
			timeConfirm(e){
				let timeStr = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				
				switch (this.type) {
					case 1: //发证时间
						this.licenseTimeShow = false;
						this.vehicle.licenseDate = timeStr;
						break
				
					case 6: //下次保养时间
						this.maintenanceDateShow = false;
						this.vehicle.nextMaintenanceDate = timeStr;
						break
				}
			},
			
			// radio选择发生变化
			radioGroupChange(e) {
				console.log('radioGroupChange', e);
				
				this.spareCarSel = e;
				this.stateSel = e;
				
				if (e == "是") {
					
					this.vehicle.isSpareCar = 0;
					this.showDispute = true;
				} else if(e=='否'){
					this.vehicle.isSpareCar = 1;
					this.showDispute = false;
				} else if(e=='整备中'){
					this.vehicle.businessType = 1;
				} else if(e=='备发车'){
					this.vehicle.businessType = 2;
				}
				// console.log(this.clueInfo.customerType);
			},

			//picker回调函数
			pickerConfim(e) {
				// let index = e;
				switch (this.type) {
					case 2: //品牌车型
						this.carInfoShow = false;
						// let carInfoObjc = this.carInfoList[index];
						let carInfoObjc = e.value[0];
						this.vehicle.brandId = carInfoObjc.brandId;
						this.vehicle.brandName = carInfoObjc.brandName;
						this.vehicle.seriesId = carInfoObjc.seriesId;
						this.vehicle.seriesName = carInfoObjc.seriesName;
						this.vehicle.modelId = carInfoObjc.seriesId;
						this.vehicle.modelName = carInfoObjc.modelName;
						this.vehicle.carInfo = carInfoObjc.brandSeriesModel;
						break

					case 3: //车辆颜色
						this.carColorShow = false;
						// let colorObjc = this.carColorList[index];
						let colorObjc = e.value[0];
						this.vehicle.carColor = colorObjc.value;
						break

					case 4: //有无侧门
						this.carSideShow = false;
						// let sideDoorObjc = this.sideList[index];
						let sideDoorObjc = e.value[0];
						this.vehicle.sideDoor = sideDoorObjc.code;
						this.vehicle.sideDoorStr = sideDoorObjc.code == 1 ? '有' : '无';
						break

					case 5: //车辆仓库
						this.carWarehouseShow = false;
						// let warehouseObjc = this.carWarehouseList[index];
						let warehouseObjc = e.value[0];
						this.vehicle.depotName = warehouseObjc.warehouseName;
						this.vehicle.depotId = warehouseObjc.warehouseId;
						break
				}
			},

            //获取回显数据
			getOldData() {
				let that = this
				
				this.$u.api.carDetail({
					carId: this.carId
				}).then(res => {
					this.vehicle = res;
					
					this.driveDefault = this.vehicle.imgDrivinglicenseFront?[this.baseImgUrl + this.vehicle.imgDrivinglicenseFront]:"../../static/car/addCar_driverCard.png"
					
					this.vehicle.carInfo = this.vehicle.brandName+'/'+this.vehicle.seriesName+'/'+this.vehicle.modelName
					
					this.vehicle.sideDoorStr = this.vehicle.sideDoor == 1 ? '有' : '无';
					
					this.showDispute = this.vehicle.isSpareCar==0;
					this.spareCarSel = this.vehicle.isSpareCar==0?'是':'否';
					this.stateSel = this.vehicle.businessType==1?'整备中':'备发车';
					
					
					if(!uni.$u.test.isEmpty(this.vehicle.accessoryItems)){
						this.value = this.vehicle.accessoryItems.split(',')
					}
					
					
					
					if(!uni.$u.test.isEmpty(this.vehicle.carUrl)){
						
						this.$refs.upload1.fileList1=this.vehicle.carUrl.filter(item => {
              return 1== item.type_file||1==item.typeFile
            }).map(item=>{

								return {
                  ...item,
									message: "",
									size: 52363,
									status: "success",
									// thumb: "http://139.9.242.179/image-server/"+item.url,
									thumb: that.baseImgUrl()+item.url,
									type: isVideo(item.url),
									url: item.url
								}
							
							
						})
						
					}
					
				})
			},

            //获取车辆归属数据
			getDeptList() {
				this.$u.api.getCommonDeptlist({
					type: '2'
				}).then(res => {
					this.deptList = res;
				})
			},
			//显示车辆归属组件
			clickCarDept() {
				this.$refs.picker._show();
			},
			//车辆归属选择回调事件
			itemOnclickDept(res) {
				this.vehicle.deptName = res.deptName;
				this.vehicle.deptId = res.deptId;
			},
			//图片上传成功回调
			uploadOnChange(tag, resultList, resultObjList) {
				console.log(tag, resultList, resultObjList);
				switch (tag) {
					case '1': //行驶证
						this.vehicle.imgDrivinglicenseFront = resultList[0];
						//调用自动识别接口
						this.getDriverCerInfo(resultList[0]);
						break

					case '2': //车辆图片
						this.vehicle.carUrl = resultObjList;
						break


				}
			},

			//自动获取行驶证信息
			getDriverCerInfo(imageUrl) {
				this.$u.api.getCarDataByXszUrl({
					url: imageUrl
				}).then(res => {
					//将字符串转为date类型
					let timeDate = new Date(res.licenseDate);
					//将date类型转为时间戳
					let timestemp = timeDate.getTime();
					//将时间戳转为指定格式的字符串
					let timeStr = this.$u.timeFormat(timestemp, 'yyyy-MM-dd');
					this.vehicle.licenseDate = timeStr;
					this.vehicle.carNo = res.carPlateNo;
					this.vehicle.vinNo = res.vinNo;
					this.vehicle.engineNo = res.engineNo;
					this.vehicle.carType = res.carType;
					this.vehicle.carOwner = res.carOwner;
					this.vehicle.carOwnerDddr = res.carOwnerDddr;
				})
			},
			
			//选择渠道商
			clickSupplierName() {
				uni.navigateTo({
					url: '/pages/addCar/addCar-supplierList'
				})
			},
			//随车物品发生改变
			checkboxGroupChange() {

			},
			//底部按钮的点击事件
			bottomClick(type) {
				let that = this
				
				//保存车辆信息
				
				if(!uni.$u.test.isEmpty(this.value)){
					
					let names = '';
					this.value.forEach(item=>{
						
						this.checkboxList.forEach(e=>{
							if(item==e.code){
								names += ','+ e.value
							}
						})
						
					})
					names = names.substring(1, names.length)
					
					this.vehicle.accessoryItems = this.value.join(',');
					this.vehicle.accessoryItemsName = names;
				}
				
				
				
				console.log('this.vehicle.accessoryItems', this.vehicle.accessoryItems);
				console.log('this.vehicle.accessoryItemsName', this.vehicle.accessoryItemsName);
				
				if(this.$u.test.isEmpty(this.vehicle.vinNo)) {
					this.$u.toast('请输入车架号');
					return;
				}else if(this.$u.test.isEmpty(this.vehicle.carInfo)) {
					this.$u.toast('请选择品牌车型');
					return;
				}else if(this.$u.test.isEmpty(this.vehicle.deptId)) {
					this.$u.toast('请选择车辆归属');
					return;
				}else if(this.$u.test.isEmpty(this.vehicle.depotId)) {
					this.$u.toast('请选择车辆仓库');
					return;
				}else {;
					
					// getApp().globalData.addCarParams.vehicle = this.vehicle;
					
					uni.showModal({
						content: '确定提交吗?',
						success(res) {
							if (res.confirm) {
								
								that.$u.api.carEdit(
								    that.vehicle
								).then(res=> {
									uni.$emit('refreshcar')
									that.$u.toast('提交成功');
									setTimeout(()=>{
										uni.navigateBack()
									}, 1000)
								})
								
							}
						}
					})
					
					
					
				}	
			}
		}
	}
</script>

<style lang="scss">
	.step-bg {
		background-color: $xz-bgColor-write;
		margin: 0;
		height: 113rpx;

	}

	.uploadBg {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10rpx 150rpx;

	}

	.licesson-upload {
		display: flex;
		align-items: center;
	}

	.u-form {
		margin: 10px;
		padding: 22rpx;
		background-color: $xz-bgColor-write;
	}

	.u-input {
		font-size: 24rpx;
	}

	// .button-container {
	// 	display: flex;		
	// 	position: fixed;
	// 	width: 100%;
	// 	height: 100rpx;
	// 	bottom: 0;
	// 	z-index: 999;
	// 	background-color: white;
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-around;	
	// }
   .deptPicker {
	   position: fixed;
	   z-index: 9999;
   }

	// button {
	// 	width: 90%;
	// 	height: 80rpx;
	// 	line-height: 80rpx;
	// 	border-radius: 40rpx;
	// 	color: $xz-bgColor-write;
	// }

	.btn-left {
		background-color: $xz-bgColor-yellow;
	}

	.btn-right {
		background-color: $xz-bgColor-blue;
	}
</style>
